<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {            
            width: 1519.2px;
            height: 140px;
        }
        .head-top {
            position: relative;
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background-color: #333;
        }
        .head-top .top-nav {
            margin-left: 150px;
            text-decoration: none;
            float: left;
            height: 40px;
            line-height: 40px;
        }
        .head-top a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
        }
        a, a:hover {
            text-decoration: none;
        }
        .head-top .tNa {
            margin: 5px;
            color: #424242;
        }
        .head-top .lsMe {
            margin-right: 140px;
            position: relative;
            float: right;
            line-height: 40px;
        }
        .head-top .gwCar {
            float: right;
            background-color: rgb(66,66,66);
            margin-left: 20px;
            height: 40px;
            width: 100px;
            line-height: 40px;
        }
        .gwCar img {
            position: relative;
            top: 24%;
            left: 10%;
            transform: translate(-50%,-50%);
        }
        .head-banner {
            height: 100px;
            width: 1240px;
            margin-left: 140px;
            /* background-color: firebrick; */
        }
        .head-banner .logo {
            margin-top: 20px;
            float: left;
            margin-left: 8px;
        }
        .head-banner .opt {
            display: inline-block;
            margin-left: 150px;
        }
        .head-banner a {
            color: #515151;
            line-height: 100px;
            display: inline-block;
            padding-left: 15px;
        }
        .head-banner .search {
            float: right;
            line-height: 100px;
        }
        .seaCh {
            width: 235px;
            height: 45px;
            border: 1px solid rgb(220, 218, 218);
        }
        .sumbit {
            width: 45px;
            height: 45px;
            border: 1px solid rgb(220, 218, 218);
            background-image: url("xiaomi_pic/ser.png");
            background-size:50px 50px;
            background-position: center;
        }

        * {
			margin: 0;
			padding: 0;
				font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
				;
		}

			/* 外层盒子布局 */
		.mi_slideshow_Tab {
			width: 1226px;
			height: 460px;
			margin: 1px ;
            margin-left: 150px;
			position: relative;
			/* background-color: antiquewhite; */
		}

		.mi_img img {
			width: 1226px;
			position: absolute;
			cursor: pointer;
		}

			/* 指示器布局 样式*/
		.mi_slideshow_indicator {
			position: absolute;
			z-index: 2;
			bottom: 5%;
            right: 3%;
			transform: rotate(180deg);
		}

		.mi_slideshow_indicator>ul>li {
				display: inline-block;
				z-index: 2;
				width: 6px;
				height: 6px;
				background-color: rgba(255, 255, 255, 0.6);
				border: 2px solid #565656;
				border-style: window-inset;
				border-radius: 45px;
				cursor: pointer;
				margin: 0 1px;
		}

			/* .mi_slideshow_indicator>ul>li:hover{
				background-color: #cecece;
			} */
			#pitch_on {
				background-color: #ede9e9;
			}

			/* 上一页按钮 下一页按钮 */
			.top_page,
			.next_page {
				width: 41px;
				height: 69px;
				z-index: 2;
				/* background-color: aqua; */
				position: absolute;
				border: none;
				top: 50%;
				margin-top: -34.5px;
				cursor: pointer;
			}

			.top_page {
				left: 234px;
				background: url(img/icon-slides.png) no-repeat -84px 50%;
			}

			.top_page:hover {
				background-position: 0px 50%;
			}

			.next_page {
				right: 0;
				background: url(img/icon-slides.png) no-repeat -125px 50%;
			}

			.next_page:hover {
				background-position: -42px 50%;
			}

			/* 侧边导航选项卡 样式*/
			.mi_Tab {
				width: 234px;
				height: 460px;
				background-color: rgba(105, 101, 101, 0.4);
				position: absolute;
				left: 0;
				z-index: 2;
			}

			.mi_Tab>ul {
				padding: 20px 0px;
			}

			.mi_Tab>ul>li {
				width: 234px;
				height: 42px;
				list-style: none;
				display: inline-block;
				box-sizing: border-box;
				position: relative;
			}

			.mi_Tab>ul>li>a {
				width: 234px;
				height: 42px;
				display: inline-block;
				text-decoration: none;
				color: #fff;
				line-height: 42px;
				font-size: 14px;
				padding-left: 30px;
				box-sizing: border-box;
			}

			.mi_Tab>ul>li>a:hover {
				background-color: #ff6700;
			}

			.mi_Tab>ul>li>a>span>img {
				color: #fff;
				width: 16px;
				position: absolute;
				right: 18px;
				top: 50%;
				margin-top: -8px;
			}
            .home-hero-sub {
                width: 1226px;
                height: 170px;
                margin-left: 150px;
                margin-top: 14px;
                /* background-color: #ff6700; */
            }
            .span1 {
                width: 234px;
                height: 170px;
                /* background-color: aqua; */
                float: left;
                background-color: #5f5750;
            }
            .span1 .mic {
                display: inline-block;
            }
            .span1 img {
                width: 25px;
                height: 25px;
                margin-top: 20px;
                margin-left: 35px;
            }
            .span1 .int1 {
                color: #fff;
                font-size: 12px;
                padding-left: 22px;
                text-align: center;
            }
            .span2 {
                width: 1400px;
            }
            .span2 img {
                display: inline-block;
                width: 316px;
                height: 170px;

            }
            .span2 .pic1 {
                margin-left: 15px;
            }
            .sha1 {
                display: inline-block;
                width: 316px;
                height: 170px;
                margin-left: 11px;
            }
            .sha1:hover {  
                box-shadow: 0 15px 30px rgba(0,0,0,.1);
            }
            .home-main {
                margin-top: 25px;
                padding-top: 4px;
                padding-bottom: 12px;
                width: 1519.2px;
                height: 6582px;
                background-color: #f5f5f5;
            }
            .conter {
                width: 1226px;
                height: 6566px;
                margin-right: auto;
                margin-left: auto;
            }
            .home-box-banner {
                height: 120px;
                margin: 22px 0;
                overflow: hidden;
            }
            .home-box-banner img {
                width: 1226px;
                height: 120px;
            }
            .home-party-one {
                width: 1226px;
                height: 686px;
                display: block;
                margin-bottom: 8px;
            }
            .box-hd {
                width: 1226px;
                height: 58px;
                position: relative;
            }
            .box-hd .title {
                font-size: 22px;
                font-weight: 200;
                line-height: 58px;
                color: #333;
            }
            .box-hd .more {
                position: absolute;
                top: 0;
                right: 0;
                
            }
            .box-hd .more-sty {
                font-size: 16px;
                line-height: 58px;
                color: #424242;
            }
            .big-one {
                float: left;
                width: 234px;
                height: 628px;
            }
            .big-one:hover {
                transform: translateY(-2px);
                box-shadow: 5px 15px 30px rgba(0,0,0,.1);
            }
            .big-one img {
                width: 234px;
                height: 628px;
            }
            .big-two {
                float: left;
                width: 978px;
                height: 628px;
            }
            .big-two .item1 {
                float: left;
                margin-left: 18px;
                width: 234px;
                height: 300px;
                background-color: #ffffff;
            }
            .item1 img {
                margin-left: 35px;
                margin-top: 22px;
                width: 160px;
                height: 160px;
            }
            .item1 .title {
                margin-top: 30px;
                text-align: center;
                color: #333;
            }
            .item1 .desc {
                text-align: center;
                font-size: 12px;
                color: #b0b0b0;
            }
            .item1 .price {
                text-align: center;
                color: #ff6700;
            }
            .item1:hover {
                transform: translateY(-2px);
                box-shadow: 0 15px 30px rgba(0,0,0,.1);
            }
            .home-party-two {
                margin-bottom: 8px;
                width: 1226px;
                height: 686px;
            }
            .box-hdd {
                width: 1226px;
                height: 58px;
                position: relative;
            }
            .box-hdd .title {
                float: left;
                font-size: 22px;
                font-weight: 200;
                line-height: 58px;
                color: #333;
            }
            .ag1 {
                float: left;
                width: 234px;
                height: 600px;
                background-color: #fff;
            }
            #container {
                margin-left: 238px;
                /* background-color: #515151; */
                height: 628px;
            }
            #content1 .items {
                list-style: none;
                text-align: center;
                float: left;
                width: 234px;
                height: 300px;
                background-color: #fff;
                margin-bottom: 14px;
                margin-left: 13px;
            }
            #content2 .items {
                text-align: center;
                list-style: none;
                float: left;
                width: 234px;
                height: 300px;
                background-color: #fff;
                margin-bottom: 14px;
                margin-left: 13px;
            }
            #container .items:hover {
                transform: translateY(-2px);
                box-shadow: 0 15px 30px rgba(0,0,0,.1);
            }
            #container img {
                width: 160px;
                height: 160px;
            }
            #container .title {
                margin-top: 30px;
                color: #333;
            }
            #container .desc {
                font-size: 12px;
                color: #b0b0b0;
            }
            #container .price {
                color: #ff6700;
            }
            .ag1:hover {
                transform: translateY(-2px);
                box-shadow: 5px 15px 30px rgba(0,0,0,.1);
            }
            .ag1 img {
                width: 234px;
                height: 615px;
            }
            #tab li {
            float: right;
            list-style: none;
            width: 35px;
            height: 30px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
            
        }
        #tab2 {
            margin-left: 20px;
        }
        #tab1 {
            margin-left: 20px;
        }
        .box-hdd li {
            font-size: 16px;
        }
        .box-hdd li:hover{
            color: #ff6700;
        }
        </style>
</head>
<body>
    <div class="header">
        <div class="head-top">
            <div class="top-nav">
                <a href="">小米商城</a><span class="tNa">|</span>
                <a href="">小米官网</a><span class="tNa">|</span>
                <a href="">MIUI</a><span class="tNa">|</span>
                <a href="">IoT</a><span class="tNa">|</span>
                <a href="">云服务</a><span class="tNa">|</span>
                <a href="">天星数科</a><span class="tNa">|</span>
                <a href="">有品</a><span class="tNa">|</span>
                <a href="">小爱开放平台</a><span class="tNa">|</span>
                <a href="">企业团购</a><span class="tNa">|</span>
                <a href="">资质证照</a><span class="tNa">|</span>
                <a href="">协议规则</a><span class="tNa">|</span>
                <a href="">下载app</a><span class="tNa">|</span>
                <a href="">Select Region</a>
            </div>
            <div class="lsMe">
                <a href="">登录</a><span class="tNa">|</span>
                <a href="">注册</a><span class="tNa">|</span>
                <a href="">消息通知</a><span class="tNa">|</span>
                <div class="gwCar">
                    <img src="./xiaomi_pic/gwcar.png" width="20px" height="13px">
                    <a href="">购物车 (0)</a>
                </div>
            </div>          
        </div>

        <div class="head-banner">            
            <img class="logo" src="./xiaomi_pic/mi.png" width="56px" height="56px" alt="">            
            <div class="opt">
                <a href="">Xiaomi手机</a>
                <a href="">Redmi手机</a>
                <a href="">电视</a>
                <a href="">笔记本</a>
                <a href="">平板</a>
                <a href="">家电</a>
                <a href="">路由器</a>
                <a href="">服务中心</a>
                <a href="">社区</a>
            </div>
            <div class="search">
                <input class="seaCh" type="text" placeholder="路由器"><input class="sumbit" type="text" >
            </div>
        </div>
    </div>
    <div class="mi_slideshow_Tab">
        <!-- 侧边选项卡 -->
        <div class="mi_Tab">
            <ul>
                <li>
                    <a href="">
                        手机 电话卡
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        电视 盒子
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        笔记本 显示器 平板
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        家电 插线板
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        出行 穿戴
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        智能 路由器
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        电源 配件
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        健康 儿童
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        耳机 音箱
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
                <li>
                    <a href="">
                        生活 箱包
                        <span>
                            <img src="img/jiantou01.svg">
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 底层轮播图 -->
        <div class="mi_slideshow">
            <!-- 轮播照片 -->
            <div class="mi_img">
                <img src="img/3a82846d975204e12923de52add19339.webp">
                <img src="img/5ade887b241d057d81e2de96590a1a6f.jpg">
                <img src="img/6ef43cf9f138a7fc3a39273d7e3d13b6.webp">
                <img src="img/ad9c1cb79a2eeb2d5ccf54dfa9782032.webp">
                <img src="img/be3a556e9cd1896f049c122a8bab3ce2.webp">
                <img src="img/ed5b4c0f1853e63df778a7f6699830ea.webp">
            </div>
            <div class="top_page"></div>
            <div class="next_page"></div>
            <!-- 轮播指示器 -->
            <div class="mi_slideshow_indicator">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li id="pitch_on"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="home-hero-sub">
        <div class="span1">
            <div class="mic1 mic">
                <a href="">
                    <img src="./xiaomi_pic/mico1.png" alt="">
                    <div class="int1">保障服务</div>
                </a>
            </div>
            <div class="mic1 mic">
                <a href="">
                    <img src="./xiaomi_pic/mico2.png" alt="">
                    <div class="int1">企业团购</div>
                </a>
            </div>
            <div class="mic1 mic">
                <a href="">
                    <img src="./xiaomi_pic/mico3.png" alt="">
                    <div class="int1">F码通道</div>
                </a>
            </div>
            <div class="mic1 mic">
                <a href="">
                    <img src="./xiaomi_pic/mico4.png" alt="">
                    <div class="int1">花米粉卡</div>
                </a>
            </div>
            <div class="mic1 mic">
                <a href="">
                    <img src="./xiaomi_pic/mico5.png" alt="">
                    <div class="int1">以旧换新</div>
                </a>
            </div>
            <div class="mic1 mic">
                <a href="">
                    <img src="./xiaomi_pic/mico6.png" alt="">
                    <div class="int1">话费充值</div>
                </a>
            </div>
        </div>
        <div class="span2">
            <img class="pic1" src="./xiaomi_pic/xmi1.jpg" alt="">
            <div class="sha1">
                <a href="#">
                    <img src="./xiaomi_pic/xmi2.jpg" alt="">
                </a>
            </div>
            <div class="sha1">
                <a href="#">
                    <img src="./xiaomi_pic/xmi3.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
    <div class="home-main">
        <div class="conter">
            <div class="home-box-banner">
                <a href="">
                    <img src="./xiaomi_pic/xmi5.webp" alt="">
                </a>
                
            </div>
            <div class="home-party-one">
                <div class="box-hd">
                    <h2 class="title">手机</h2>
                    <div class="more">
                        <a class="more-sty" href="">
                            查看更多
                            <i class="look-more"></i>
                        </a>
                    </div>
                </div>
                <div class="box-tele">
                    <div class="big-one">
                        <a href="#">
                            <img src="./xiaomi_pic/tel1.webp" alt="">
                        </a>
                    </div>
                    <div class="big-two">
                        <div class="item item1">
                            <a href="#">
                                <img src="./xiaomi_pic/tel2.webp" alt="">
                                <h3 class="title">Xiaomi 13 限量定制色</h3>
                                <p class="desc">Xiaomi 13 限量定制色</p>
                                <p class="price">4999元</p>
                            </a>
                        </div>
                        <div class="item item2"></div>
                        <div class="item item3"></div>
                        <div class="item item4"></div>
                        <div class="item item5"></div>
                        <div class="item item6"></div>
                        <div class="item item7"></div>
                        <div class="item item8"></div>
                    </div>
                </div>
            </div>
            <div class="home-party-two">
                <div class="box-hdd">
                    <h2 class="title">智能穿戴</h2>
                    <ul id="tab">
                        <li id="tab2" value="2">耳机</li>
                        <li id="tab1" value="1">穿戴</li>  
                    </ul>
                </div>
                <div class="ag1">
                    <a href="#">
                        <img src="./xiaomi_pic/oth.webp" alt="">
                    </a>
                </div>
                <div id="container">
                    <div id="content1">
                        <ul>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/ej.webp" alt="">
                                <p class="title">Xiaomi Buds 4 Pro</p>
                                <p class="desc">48dB智能动态降噪 | 骨声纹通话降噪</p>
                                <p class="price">1099元</p>
                            </a></li>
                            
                        </ul>
                    </div>
                    <div id="content2" style="display: none">
                        <ul>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            <li class="items"><a href="#">
                                <img src="./xiaomi_pic/cd.webp" alt="">
                                <p class="title">小米手环7 Pro</p>
                                <p class="desc">全彩方形大屏 | 独立GPS定位 | 多重健…</p>
                                <p class="price">369元</p>
                            </a></li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /* 
            轮播图的js,为了方便区分我写两个 
         */
        $(function() {
            var img_index = $(".mi_img img").length - 1 //获取 图片的张数 -1 拿来当下标索引使用
            // 页面加载时启动定时器   全局定时器 timer
            var timer = setInterval(function() {
                $(".next_page").trigger("click");
            }, 7000);
            // 点击下一页按钮 触发方法 next_cut_slideshow
            $(".next_page").click(function() {
                img_index--;
                if (img_index < 0) {
                    img_index = 5
                }
                next_cut_slideshow(img_index);
            });
            // 点击上一页按钮 触发方法 next_cut_slideshow
            $(".top_page").click(function() {
                img_index++;
                if (img_index > 5) {
                    img_index = 0
                }
                next_cut_slideshow(img_index);
            });
            // 点击指示器按钮 触发方法 next_cut_slideshow
            $(".mi_slideshow_indicator>ul>li").click(function() {
                img_index = $(this).index();
                next_cut_slideshow(img_index);
            });
            // 定义轮播图切换方法
            // 点击后的切换方法
            function next_cut_slideshow(img_index) {
                $(".mi_img img:eq(" + img_index + ")").fadeIn().siblings().fadeOut();
                $(".mi_slideshow_indicator>ul>li:eq(" + img_index + ")").css({
                    "background-color": "#cecece"
                }).siblings().css({
                    "background-color": "#6d6d6d"
                });
            }
            //清除定时器方法  
            $(".mi_slideshow").hover(function() {
                clearInterval(timer);
            }, function() {
                timer = setInterval(function() {
                    $(".next_page").trigger("click");
                }, 7000);
            });
        });

        var container=document.querySelectorAll('#container>div')
        var event_li=document.querySelectorAll('#tab>li')
        var currentindex=0
        for(var i=0;i<event_li.length;i++){
        event_li[i].num=i
        event_li[i].onclick=function(){
            container[currentindex].style.display='none'
            var index_other=this.num
            container[index_other].style.display='block'
            currentindex=index_other
        }}
        
   </script>
</body>
</html>